<template lang="html">
  <div :class="info?'partner':'partner partner-not-data'">
    <div class="partner-head" v-if="info">
      <div class="bg">
        <img class="max" src="/static/modules/partner/partner_img_bg@2x.jpg">
      </div>
      <div class="userinfo-wrap">
        <div class="user-avatar">
          <img class="max" :src="info.headimgurl">
        </div>
        <div class="user-identity">
          {{ info.nickname }}
        </div>
        <div class="user-star">
          <i v-for="i in 5">
            <img class="max" src="/static/modules/partner/partner_icon_star@2x.png">
          </i>
        </div>
        <div class="user-partner">
          {{ info.partnername }}
        </div>
        <div class="user-map">
          <i>
            <img class="max" src="/static/modules/partner/map.png">
          </i>
          占领区域：{{ info.area }}
        </div>
        <div class="user-profit">
          总收益<span>{{ info.money }}</span>元
        </div>
      </div>
    </div>
    <div class="partner-list" v-if="info">
      <scroll
        class="scroll"
        :data="list"
        :pullup="isPullup"
        @scrollToEnd="searchMore"
        v-if="list && list.length"
        ref="suggest"
      >
        <ul>
          <li v-for="(i, idx) in list" :key="idx">
            <i>
              <img class="max" src="/static/modules/partner/partner_icon_message@2x.png" alt="">
            </i>
            <div class="info">
              <p class="content">
                {{ i.msg }}
              </p>
              <p class="date">
                {{ i.add_time }}
              </p>
            </div>
          </li>
        </ul>
      </scroll>
      <div
        class="notMore flex-display flex-display-column flex-center-align"
        v-if="!list.length"
      >
        <img class="max" src="/static/ethel_img/shopping_img_em.png">
        <span>记录空空如也！！</span>
      </div>
    </div>

  </div>
</template>

<script>
import { getPartnerInfo, getPartnerMsg } from '@/api/partner'
import Scroll from "@/base/scroll/scroll";
import Loading from "@/base/loading/loading";
import { Toast } from "mint-ui";
export default {
  components: {
    Scroll,
    Loading,
  },
  data() {
    return {
      info: null,
      infoMsg: null,
      list: [],
      isNext: null,
    }
  },
  created() {
    this.getPartnerInfo();
    this.getPartnerMsg();
  },
  mounted() {

  },
  methods: {
    // 获取合伙人信息
    getPartnerInfo() {
      getPartnerInfo({
        userid: this.getUserInfo().id,
      }).then(res=>{
        if(res.code == 1){
          Toast(res.msg);
          setTimeout(()=>{
            this.$router.go(-1);
          }, 1000)
        }else {
          this.info = res.data;
        }
      })
    },
    // 获取合伙人消息
    getPartnerMsg() {
      getPartnerMsg({
        userid: this.getUserInfo().id,
        isNext: this.isNext
      }).then(res=>{
        this.list = [...this.list, ...res.data];
        this.isNext = res.next;
      })
    },
    /**
     * @desc 是否需要下拉加载
     */
    searchMore() {
      if (this.isNext) {
        this.getJifenInfo();
        return;
      }
      Toast({
        message: "我是有底线的",
        position: "middle",
        duration: 2000
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.partner{
  background-color: #FF7993;
  padding-bottom: 1rem;
  .partner-head{
    position: relative;
    .bg{
      position: absolute;
      width: 10rem;
      height: 10.53rem;
      top: 0;
      left: 0;
      img{
        height: 10.53rem;
      }
    }
    .userinfo-wrap{
      position: relative;
      z-index: 2;
      text-align: center;
      overflow: hidden;
      .user-avatar{
        width: 2.3rem;
        height: 2.3rem;
        margin: 0 auto;
        margin-top: 1.88rem;
        transform: translate(-1px, 0);
        img{
          width: 100%;
          height: 100%;
          border-radius: 100%;
        }
      }
      .user-identity{
        font-size: .347rem;
        color: #fff;
        margin-top: .35rem;
      }
      .user-star{
        i{
          width: .23rem;
          display: inline-block;
          margin: 0 .05rem;
        }
      }
      .user-partner{
        background-color: rgba(255,179,193,1);
        color: #fff;
        text-align: center;
        margin: .1rem auto;
        display: inline-block;
        width: 2.4rem;
        line-height: .56rem;
        font-size: .34rem;
        font-weight: 100;
        border-radius: 1rem;
      }
      .user-map{
        color: #fff;
        margin-top: .3rem;
        i{
          width: .72rem;
          display: inline-block;
          img{
            vertical-align: middle;
            margin-top: -.1rem;
          }
        }
      }
      .user-profit{
        color: #fff;
        margin-top: .3rem;
        span{
          color: #FFF18A;
          font-size: .42rem;
        }
      }
    }
  }
  .partner-list{
    background-color: #fff;
    width: 9.46rem;
    margin: 0 auto;
    margin-top: .4rem;
    padding: .6rem .3rem;
    border-radius: .26rem;
    position: relative;
    z-index: 3;
    li{
      overflow: hidden;
      border-bottom: 1px solid #F2F2F2;
      padding-bottom: .4rem;
      padding-top: .4rem;
    }
    i{
      float: left;
      width: .54rem;
      margin-top: .16rem;
    }
    .info{
      float: left;
      width: 7.9rem;
      margin-left: .213rem;
      .date{
        text-align: right;
        color: #999999;
        font-size: .32rem;
        padding-top: .2rem;
      }
    }
  }
}
.partner-not-data{
  padding: 0;
}
.notMore {
  width: 100%;
  height: 100%;
  padding-top: 1rem;
  span {
    font-size: 13px;
    color: rgba(160, 154, 155, 1);
    margin-top: 15px;
  }
  img {
    width: 140px;
    height: 85px;
    display: block;
  }

}
</style>
